<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :sm="6" :lg="6">
        <el-card class="bg-primary">
          <div class="card-content clearfix">
            <div class="pull-left">
              <el-avatar :icon="UserFilled" />
            </div>
            <div class="pull-right">
              <p class="h6 text-white m-t-0">师资队伍</p>
              <p class="h3 text-white m-b-0">{{ teacherCount }}</p>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :sm="6" :lg="6">
        <el-card class="bg-danger">
          <div class="card-content clearfix">
            <div class="pull-left">
              <el-avatar :icon="User" />
            </div>
            <div class="pull-right">
              <p class="h6 text-white m-t-0">学生人数</p>
              <p class="h3 text-white m-b-0">{{ studentCount }}</p>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :sm="6" :lg="6">
        <el-card class="bg-success">
          <div class="card-content clearfix">
            <div class="pull-left">
              <el-avatar :icon="Reading" />
            </div>
            <div class="pull-right">
              <p class="h6 text-white m-t-0">考试次数</p>
              <p class="h3 text-white m-b-0">{{ examCount }}</p>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :sm="6" :lg="6">
        <el-card class="bg-purple">
          <div class="card-content clearfix">
            <div class="pull-left">
              <el-avatar :icon="FolderOpened" />
            </div>
            <div class="pull-right">
              <p class="h6 text-white m-t-0">考试人次</p>
              <p class="h3 text-white m-b-0">{{ scoreCount }}</p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-divider/>
    <el-row>
      <el-col :span="24">
        <div ref="clazzPhysicalScoreWordCloudStats" id="clazzPhysicalScoreStats" style="height: 500px" />
      </el-col>
    </el-row>
    <el-divider/>
    <el-row :gutter="20">
      <el-col :sm="12" :lg="12">
        <el-card>
          <div ref="clazzPhysicalScorePieStats" style="height: 500px" />
        </el-card>
      </el-col>
      <el-col :sm="12" :lg="12">
        <el-card>
          <div ref="clazzPhysicalScoreRectStats" style="height: 500px" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Index">
import {FolderOpened, Reading, User, UserFilled} from "@element-plus/icons-vue";
import * as publicApi from "@/api/school/publicApi";
import * as echarts from "echarts";
import 'echarts-wordcloud';
const loading = ref(true);
const teacherCount = ref(0);
const studentCount = ref(0);
const examCount = ref(0);
const scoreCount = ref(0);
const version = ref('1.8.0');
const clazzPhysicalScorePieStats = ref(null);
const clazzPhysicalScorePieStatsInstance = ref(null);
const clazzPhysicalScoreRectStats = ref(null);
const clazzPhysicalScoreRectStatsInstance =ref(null);

const clazzPhysicalScoreWordCloudStats = ref(null);
const clazzPhysicalScoreWordCloudStatsInstance = ref(null);
function getList() {
  loading.value = true;
  publicApi
      .indexData()
      .then((response) => {
        console.log(response);
        teacherCount.value = response.teacherCount;
        studentCount.value = response.studentCount;
        examCount.value = response.examCount;
        scoreCount.value = response.scoreCount;
        pieChartBuild(response);
        rectChartBuild(response)
        wordCloudChartBuild(response)
      })
      .finally(() => {
        loading.value = false;
      });
}
getList()
function goTarget(url) {
  window.open(url, '__blank');
}


//构造饼图
function pieChartBuild( response) {
  const clazzPhysicalScoreStatsInstance = echarts.init(clazzPhysicalScorePieStats.value, 'macarons');
  let option = {
    title: {
      text: '本校全体学生考试成绩等级分布饼图',
      // subtext: '分数划分区域',
      left: 'center'
      // bottom: '5%'
    },
    tooltip: {
      trigger: 'item'
    },
    toolbox: {
      show: true,
      right: 20,
      top: 10,
      feature: {
        saveAsImage: {}
      }
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '分数区间',
        type: 'pie',
        // radius: '50%',
        radius: [36, 180],
        center: ['50%', '50%'],
        roseType: 'area',
        data:  response.pieDataList,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        label: {
          show: true,
          formatter: '{b} : {c} ({d}%)'
        },
        itemStyle: {
          borderRadius: 8,
        }
      }
    ]
  }
  clazzPhysicalScoreStatsInstance.setOption(option);
  clazzPhysicalScorePieStatsInstance.value = clazzPhysicalScoreStatsInstance
}


//构造直方图
function rectChartBuild(response) {
  const clazzPhysicalScoreStatsInstance = echarts.init(clazzPhysicalScoreRectStats.value, 'macarons');

  let mylinedata = []
  for (let i = 0; i < response.histogramData.length; i++) {
    mylinedata.push(response.histogramData[i][2])
  }
  let mydata = response.histogramData.map(function (item, index) {
    return {
      value: item,
      itemStyle: {
        // color: '#9bbb59'
      }
    }
  })

  function renderItem (params, api) {
    let yValue = api.value(2)
    let start = api.coord([api.value(0), yValue])
    let size = api.size([api.value(1) - api.value(0), yValue])
    let style = api.style()

    return {
      type: 'rect',
      shape: {
        x: start[0],
        y: start[1],
        width: size[0],
        height: size[1]
      },
      style: style
    }
  }

  let option = {
    title: {
      text: '本校全体学生考试成绩得分分布直方图',
      left: 'center'
    },
    tooltip: {},
    xAxis: [{
      scale: true,
      type: 'value',
      min: 0,
      max: response.fullScore,
      interval: 10
    }, {
      type: 'category',
      show: false,
      data: response.lineTitleArray
    }],
    yAxis: {},
    series: [{
      type: 'custom',
      renderItem: renderItem,
      label: {
        show: true,
        position: 'top'
      },
      dimensions: ['from', 'to', '人数'],
      encode: {
        x: [0, 1],
        y: 2,
        tooltip: [0, 1, 2],
        itemName: 3
      },
      data: mydata
    }, {
      type: 'line',
      smooth: true,
      xAxisIndex: 1,
      itemStyle: {
        normal: {
          color: '#275F82', // 改变折线点的颜色
          lineStyle: {
            color: '#253A5D' // 改变折线颜色
          }
        }
      },
      data: mylinedata
    }]
  }
  clazzPhysicalScoreStatsInstance.setOption(option);
  clazzPhysicalScoreRectStatsInstance.value = clazzPhysicalScoreStatsInstance
}

function wordCloudChartBuild(response) {
  const clazzPhysicalScoreStatsInstance = echarts.init(document.getElementById('clazzPhysicalScoreStats'), 'macarons');
  let option = {
    tooltip: {
      show: true
    },
    series: [
      {
        type: 'wordCloud',
        data: response.wordDataList,
        textStyle: {
          fontFamily: 'sans-serif',
          fontWeight: 'bold',
          // Color can be a callback function or a color string
          color: function () {
            // Random color
            return 'rgb(' + [
              Math.round(Math.random() * 160),
              Math.round(Math.random() * 160),
              Math.round(Math.random() * 160)
            ].join(',') + ')';
          }
        },
        emphasis: {
          focus: 'self',

          textStyle: {
            textShadowBlur: 10,
            textShadowColor: '#333'
          }
        },
        //shape: 'circle', // 词云图显示排列为什么形状，默认 circle，cardioid 心形，diamond 菱形
        // textStyle: {
        //   normal: {
        //     fontFamily: 'sans-serif',
        //     fontWeight: 'bold',
        //     color: function () {
        //       // 随即配色，每次刷新页面都会显示不同颜色
        //       return (
        //           'rgb(' +
        //           [
        //             Math.round(Math.random() * 160),
        //             Math.round(Math.random() * 160),
        //             Math.round(Math.random() * 160)
        //           ].join(',') +
        //           ')'
        //       )
        //     }
        //   }
        // },
        // emphasis: {
        //   focus: 'self',
        //   textStyle: {
        //     textShadowBlur: 10,
        //     textShadowColor: '#333'
        //   }
        // }
      }
    ]
  };
  clazzPhysicalScoreStatsInstance.setOption(option);
  clazzPhysicalScoreWordCloudStatsInstance.value = clazzPhysicalScoreStatsInstance
}

</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: 'open sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
.bg-primary {
  background-color: #33cabb !important;
  color: #fff!important;
}
.bg-danger {
  background-color: #f96868 !important;
  color: #fff!important;
}
.bg-success {
  background-color: #15c377 !important;
  color: #fff!important;
}
.bg-purple {
  background-color: #926dde !important;
  color: #fff!important;
}
.card-content {
  padding: 24px 24px;
  .pull-left {
    float: left!important;
  }
  .pull-right {
    float: right!important;
    .m-t-0 {
      margin-top: 0px!important;
    }
    .m-b-0 {
      margin-bottom: 0px!important;
    }
    .text-white {
      color: #ffffff!important;
    }
    .h6 {
      font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', 'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif;
      line-height: 1.5;
      letter-spacing: .5px;
      font-size: 12px;
      margin-bottom: 0.5rem;
    }
    .h3{
      margin-top: 0;
      font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', 'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif;
      line-height: 1.5;
      letter-spacing: .5px;
      font-size: 24px;
    }
    p{
      margin: 0 0 10px;
    }
  }
}
</style>
